<template>
  <view class="service-message" @click="handleClick">
    <u-image class="service-message__image" :width="130" :height="80" :src="getFilePath(data.cover)" />
    <view class="service-message__info">
      <view class="service-name">{{ data.name }}</view>
      <view class="service-content">
        <view class="service-actPrice"> {{ data.actPrice ? '¥' + data.actPrice : '??' }}</view>
        <view v-if="data.priceType === 'periodic'" class="periodic-unit">
          <view v-if="data.chargePerPerson > 0" class="periodic-unit">人/</view> 元/{{ unit }}
        </view>
        <view class="service-price"> {{ data.price ? '¥' + data.price : '联系客服改价' }}</view>
      </view>
    </view>
  </view>
</template>
<script>
import { getFilePath } from '../../utils/common'

const unitList = [
  { label: '月', value: 'month' },
  { label: '季', value: 'quarter' },
  { label: '半年', value: 'half_year' },
  { label: '年', value: 'year' }
]

export default {
  name: 'ServiceMessage',
  props: {
    item: {
      type: Object,
      default: () => ({
        avatar: '',
        m_data: {}
      }),
      required: true
    }
  },
  computed: {
    data() {
      return this.item.m_data
    },
    unit() {
      return unitList.find((item) => item.value == this.data.servePeriodUnit)?.label
    }
  },
  methods: {
    getFilePath,
    handleClick() {
      if (this.$route.path === '/ServerDetail') {
        window.location.reload()
      } else {
        this.$router.push({
          path: '/ServerDetail',
          query: { serveId: this.data.id, type: this.data.serviceType }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.service-message {
  display: flex;
  align-items: center;
  gap: 10px;
  //max-width: 270px;
  //width: fit-content;
  margin: 12px auto;
  padding: 10px 10px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px 8px 8px 0;

  .service-message__image {
    width: 130px;
  }

  .service-message__info {
    flex: 1;
    width: 0;
    padding: 0 10px;

    .service-name {
      margin-bottom: 10px;
      width: auto;
      font-weight: 400;
      font-size: 16px;
      color: #333;
    }

    .service-content {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .service-actPrice {
        display: inline-block;
        width: auto;
        color: #ff6d00;
      }

      .periodic-unit {
        font-size: 10px;
        margin-left: 2px;
        color: #999999;
      }

      .service-price {
        text-decoration: line-through;
        color: #999;
      }

      .service-actPrice {
        font-weight: 600;
      }
    }
  }
}

.out {
  .service-message {
    border-radius: 8px 8px 0 8px;
  }
}
</style>
